<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <h2 v-show="false">我是标题</h2> -->
        <!-- <h2 v-if="false">我是标题</h2>
        <button>点我</button> -->
        <ul>
            <!-- <li v-for="item in arr"> -->
                <!-- {{ item.title }} --- 
                <span v-if="item.code === 0">已支付</span>
                <span v-else-if="item.code === 1">待发货</span>
                <span v-else>已退款</span> -->

                <!-- <span v-if="item.code === 0">已支付</span>
                <span v-if="item.code === 1">待发货</span>
                <span v-if="item.code === 2">已退款</span> -->
            <!-- </li> -->

            <h2>
                小明: {{ age }} 岁
            </h2>

            <h3 v-if="age < 3">
                婴幼儿 (0-3)
            </h3>

            <h3 v-else-if="age > 18">
                成年 (>18)
            </h3>

            <h3 v-else>
                小孩 (3-18)
            </h3>
        </ul>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                age: 19,
                arr: [
                    {
                        title: "商品1",
                        code: 0
                    },
                    {
                        title: "商品2",
                        code: 1
                    },
                    {
                        title: "商品3",
                        code: 2
                    }
                ]
            }
        })

        // v-show="true" (后面的值会隐式转换)  控制css display (经常性的显示隐藏)
        // v-if  控制dom结构的显示  (不经常性的显示隐藏)
        // v-else-if
        // v-else
    </script>
</body>
</html>